.bui-skeleton {
  --height: var(--bui-skeleton-height, 1.2em);

  display: block;

  &-animation-wave {
    background: linear-gradient(
      90deg,
      rgba(190, 190, 190, 0.2) 25%,
      rgba(129, 129, 129, 0.24) 37%,
      rgba(190, 190, 190, 0.2) 63%
    );
    background-size: 400% 100%;
    animation: bui-skeleton-wave 1.4s ease infinite;
  }

  &-animation-pulse {
    background: rgba(190, 190, 190, 0.35);
    animation: bui-skeleton-pulse 1.4s ease infinite;
  }

  &-text {
    height: auto;
    transform-origin: 0 55%;
    transform: scale(1, 0.6);
    border-radius: var(--bui-shape-radius-label);

    &::before {
      content: '\00a0';
    }
  }

  &-rectangular {
    height: var(--height);
  }

  &-rounded {
    height: var(--height);
    border-radius: var(--bui-shape-radius-label);
  }

  &-circular {
    border-radius: 50%;
  }

  &-with-children {
    max-width: fit-content;
  }
}

@keyframes bui-skeleton-wave {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

@keyframes bui-skeleton-pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.58;
  }

  100% {
    opacity: 1;
  }
}
